import { Button, Modal, Toast } from "antd-mobile";
import React, { useEffect, useState } from "react";
import requewt from "@/utils/requewt";
import { API } from "@/config";
import callFeedback from "@/components/common/modalFeedback";
import { useRouter } from "next/router"
import { isValidArr, navigateTo } from "@/utils";
import * as gtag from "@/libs/gtag";
import useRecord from "@/components/pages/stores/useRecord";
import { MAP, STATUS } from "@/components/pages/map/config";
import { motion } from "framer-motion";
import classnames from "classnames";

export default function ({dataSource, mapSource}) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(undefined);
  const [map, setMap] = useState(mapSource);
  const router = useRouter();

  const env = useRecord(state => state.env);
  const {mid} = router.query;

  const wrapperVar = {
    hidden: {rotateY: 180, opacity: 0},
    visible: {
      opacity: 1,
      rotateY: 0,
      transition: {
        duration: .5,

      }
    },
    exit: {y: 100, opacity: 0},
  };

  const containerVar = {
    hidden: {opacity: 0},
    visible: {
      opacity: 1,
      transition: {
        duration: 1,
        delayChildren: 0.05,
        staggerChildren: 0.05
      }
    },
    exit: {y: 50, opacity: 0},
  };

  const itemVar = {
    hidden: {y: 50, opacity: 0},
    visible: {
      y: 0,
      opacity: 1
    },
  };

  useEffect(() => {
    (async () => {
      const {mid} = router.query;

      // setMap(MAP[mid]);
      // await handler.check(mid);
    })()

    return () => {
      Modal.clear();
      Toast.clear();
    }
  }, [])


  const handler = {
    // 获取活动状态
    check: async (mid) => {
      setLoading(true);
      await Toast.show({icon: 'loading', content: '加载中'})

      const resp = await requewt(API.map.detail, {body: {area: mid}});
      Toast.clear();
      setLoading(false)
      console.log(`resp`, resp)
      if (resp?.error_code !== 0) {
        await Toast.clear();
        await callFeedback({title: resp?.msg || `请求失败`});
        return;
      }
      setData(resp?.data);
    },
    play: async (item) => {
      const isLock = item?.status !== 1;
      if (isLock) return Toast.show({content: STATUS[item?.status]?.text});

      const type = item.game_name.split(`_`)[0];
      await router.push(`/game/${type}?area=${mid}&position=${item.position}`)
    },
    // 领取奖励
    jump: url => navigateTo(`${url}?aid=${mid}`),
  }

  return (
    <>
      <div className="position-center">

        <motion.div className="content" variants={wrapperVar}
                    initial="hidden"
                    animate="visible"
                    exit="exit"
        >
          <motion.div className={`map-wrapper map-${map?.value}`}
                      variants={containerVar}
                      initial="hidden"
                      animate="visible"
                      exit="exit"
          >
            {/* <motion.img variants={itemVar} src={`/img/map/${map?.value}/map-holder.jpg`} alt=""
                        className="map-holder" />

            <motion.img variants={itemVar} src={`/img/map/${map?.value}/map-router.png`} alt=""
                        className="map-router" />

            <motion.img variants={itemVar} src={`/img/map/${map?.value}/map-title.png`} alt="" className="map-title" />

            <motion.img variants={itemVar} src={`/img/map/${map?.value}/deco-car.png`} alt="" className="map-car" />

            <motion.img variants={itemVar} src={`/img/map/${map?.value}/board-day-1.png`} alt=""
                        className="map-board board-1" />

            <motion.img variants={itemVar} src={`/img/map/${map?.value}/board-day-2.png`} alt=""
                        className="map-board board-2" /> */}

            {
              isValidArr(map?.decoration) &&
              map.decoration.map((item, index) => {
                return (
                  <motion.img src={item.thumb} alt=""
                              style={item.styles}
                              className="map-decoration" key={index} />
                )
              })
            }

            {
              isValidArr(dataSource) &&
              dataSource.map((item, index) => {
                const mapObj = map?.[`stations`][item?.position];
                const isLock = item?.status !== 1;

                return (
                  <motion.div className={classnames(`map-item`, {lock: isLock})} key={index}
                              style={mapObj.styles?.self}
                              onClick={() => handler.play(item)}
                              variants={itemVar}
                  >
                    {/* <img src={`/img/map/${map?.value}/icon-location.png`} alt=""
                         className="map-item-location"
                         style={mapObj?.styles?.location}
                    />

                    <img src={`/img/map/${map?.value}/badge-${mapObj.value}.png`} alt=""
                         className="map-item-badge"
                         style={mapObj?.styles?.badge}
                    />

                    <img src={`/img/map/${map?.value}/item-${mapObj.value}.png`} alt=""
                         className="map-item-thumb"
                         style={mapObj?.styles?.thumb}
                    /> */}

                    <div className="map-item-name">{item?.name}</div>

                  </motion.div>
                )
              })
            }
          </motion.div>
        </motion.div>
      </div>
    </>
  )
}